<template>
	<view class="container">

		
		<view v-for="(item, i) in info" :key="item.id">
		<!-- 	<noti-card :item='item' v-if="search(item,keywords)" :text="searchReturn(item,keywords)">
			</noti-card> -->
			<!-- <noti-card :item='item' v-if="search(item,keywords)" :text="searchReturn(item,keywords)">
			</noti-card> -->
			
			<noti-card :item='item' >
			</noti-card>
		</view>

	</view>
	</template>

		<script>
			import {
				mapState
			} from "vuex"

			export default {
				name: 'main-notiList',
				props: ['info'],
				data() {
					return {
						// 搜索框关键词绑定，默认值为空
						keywords: "",
						// 计算属性  unreadNotiCountMsg: "全部未读（" + this.item.length + "）",
						// 默认展开未读
						openTab: ["unreadNoti"],
					}
				},

				// 生命周期函数，组件被挂载后调用
				mounted() {
					// console.log(this.$store.state.m_noti);
					// console.log("*****************", this.temp1.match(this.temp2));
					// console.log("*****************", this.temp1.match(this.temp3));
					// console.log("*****************", this.temp1.match(this.temp4));
					// console.log(this.unreadNoti.length);
				},

				computed: {
					// 分发 m_noti:noti.js 的 State
					...mapState('m_noti', ['allNoti', 'unreadNoti', 'readNoti']),

					unreadNotiCountMsg() {
						return "全部未读 (" + this.unreadNoti.length + ")";
					}
				},

				methods: {

					// 仅关键词为空时，改变搜索状态
					// altIsSeraching() {
					// 	if(this.keywords == "") {
					// 		this.isSearching = !this.isSearching;
					// 	}
					// },

					//返回模糊查询结果
					search(a, b) {
						return a.content.match(b)
					},
					//返回查询并替换掉后的内容
					searchReturn(a, b) {
						return a.content.replace(new RegExp(b, "gm"), '<b style="color:black!important;">' + b + '</b>')
					},

					// 响应搜索框的“搜索”动作
					searchConfirm() {
						// console.log(this.keywords);

						// 弹框提示输入的关键词
						var msg = this.keywords;
						wx.showToast({
							title: msg,
							mask: true,
							icon: 'success',
							duration: 1500
						})
					},

					refleshColl() {
						// console.log(this.$refs.unreadNoti.collapse);
						this.$nextTick(function() {
							this.$refs.unreadNoti.collapse.resize();
							this.$refs.readNoti.collapse.resize();
						});
					}
				}
			}
		</script>

		<style>
			.container {
				padding: 20px;
				font-size: 14px;
				line-height: 24px;
			}

			/* 按钮盒子 */
			.btnBox {
				/* padding: 10rpx 0 10rpx 0; */
				display: flex;
				flex-direction: row;
				justify-content: space-around;
			}

			/* 卡片中按钮样式 */
			.btnInMore {
				/* border: 1px solid deeppink; */
				display: inline-block;
				height: 130rpx;
				width: 350rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}

			/* 菜单中按钮样式 */
			.btnInCard {
				/* border: 1px solid deeppink; */
				display: inline-block;
				height: 80rpx;
				width: 160rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}
		</style>